<template>
  <div class="content-box">
    <div class="container">
      <span>&nbsp;&nbsp;项目名称：</span>
      <el-input
        v-model="queryList.projectName"
        placeholder="请输入项目名称"
        style="width: 200px"
        size="mini"
      ></el-input>
      <span style="margin-left: 20px">预计开工：</span>
      <el-date-picker
        v-model="useless.startTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        size="mini"
      >
      </el-date-picker>
      <span style="margin-left: 20px">立项日期：</span>
      <el-date-picker
        v-model="useless.setupTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        size="mini"
      >
      </el-date-picker>
      <span style="margin-left: 20px">项目经理：</span>
      <el-select
        v-model="queryList.projectManagerId"
        clearable
        placeholder="请选择项目经理"
      >
        <el-option
          v-for="item in user"
          :key="item.id"
          :label="item.userName"
          :value="item.id"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;
      <el-button size="mini">查询</el-button>
      <el-button size="mini">重置</el-button>
    </div>
    <div class="container">
      <div>
        <el-button @click="add()">新增</el-button>
        <el-button>导出</el-button>
      </div>
      <div class="table-container">
        <el-table
          :data="tableData"
          v-adaptive="{ bottomOffset: 85 }"
          border
          height="500"
          style="width: 100%; font-size: 12px; margin-top: 10px"
          :cell-style="cellStyle"
          :header-cell-style="rowClass"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          ><el-table-column type="selection" align="center"></el-table-column>
          <el-table-column
            prop="id"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="disclosureNumber"
            label="交底编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="projectName"
            label="项目名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dateOfDisclosure"
            label="交底日期"
            align="center"
          ></el-table-column>
          <el-table-column
            :formatter="formatterTypeOfDisclosure"
            label="交底类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="disclosureObject"
            label="交底人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="disclosureName"
            label="被交底人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fillingName"
            label="填报人名称"
            align="center"
          ></el-table-column>
          <el-table-column
            :formatter="formatterState"
            label="流程状态"
            align="center"
          ></el-table-column>
          <el-table-column label="设置" align="center" width="250">
            <template slot-scope="scope">
              <el-button size="mini">查看</el-button>
              <el-button size="mini" @click="update(scope.row)">编辑</el-button>
              <el-button size="mini">提交</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-area">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryList.pageNum"
          :page-sizes="[10, 15, 20, 30, 50]"
          :page-size="queryList.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/util/request";
import axios from "axios";
const useless = {
  //时间数组
  startTime: [], //开工时间
  setupTime: [], //立项时间
};
const defaultQueryList = {
  //查询条件
  projectName: "", //项目名称
  projectManagerId: "", //项目经理
  startTime: "", //预计开工  开始时间
  endTime: "", //预计开工  结束时间
  setupStartTime: "", //立项时间  开始时间
  setupEndTime: "", //立项时间  结束时间
  pageNum: 1, //当前页
  pageSize: 10, //每页显示条数
};
const pickerOptions = {
  //时间选择器快捷选项
  shortcuts: [
    {
      text: "最近一周",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit("pick", [start, end]);
      },
    },
    {
      text: "最近一个月",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit("pick", [start, end]);
      },
    },
    {
      text: "最近三个月",
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit("pick", [start, end]);
      },
    },
  ],
};
export default {
  name: "ProjectDisclosure",
  data() {
    return {
      queryList: Object.assign({}, defaultQueryList), //查询条件
      useless: Object.assign({}, useless), //时间数组
      pickerOptions: Object.assign({}, pickerOptions), //时间选择器快捷选项
      user: [], //用户列表
      tableData: [], //表格数据
      selectedList: [], //批量选择行数
      total: 0, //总条数
      config: {}, //请求头
    };
  },
  watch: {
    //监听
    "useless.startTime": function (val) {
      //开工时间
      if (val != null && val.length > 0) {
        this.queryList.startTime = val[0];
        this.queryList.endTime = val[1];
      } else {
        this.queryList.startTime = "";
        this.queryList.endTime = "";
      }
    },
    "useless.setupTime": function (val) {
      //立项时间
      if (val != null && val.length > 0) {
        this.queryList.setupStartTime = val[0];
        this.queryList.setupStartTime = val[1];
      } else {
        this.queryList.setupTime = "";
        this.queryList.setupStartTime = "";
      }
    },
  },
  created() {
    //初始化
  },
  mounted() {
    //挂载
    this.findProjectDisclosure(); //全部查询
    this.shezhi(); //设置请求头
  },
  methods: {
    shezhi() {
      //设置请求头
      const user = window.sessionStorage.getItem("user");
      const token = user ? JSON.parse(user).token : null;
      let config = {
        Headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", //
          // 设置请求头
          //去除双引号
          Authorization: token ? token.replace(/\"/g, "") : null,
        },
      };
      this.config = config;
    },
    query() {
      //查询
      let t = new FormData();
      t.append("projectName", this.queryList.projectName);
      t.append("projectManagerId", this.queryList.projectManagerId);
      t.append("startTime", this.queryList.startTime);
      t.append("endTime", this.queryList.endTime);
      t.append("setupStartTime", this.queryList.setupStartTime);
      t.append("setupEndTime", this.queryList.setupEndTime);
      t.append("pageNum", this.queryList.pageNum);
      t.append("pageSize", this.queryList.pageSize);
      axios.post("/project-disclosure/page", t, this.config).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalSize;
        }
      });
    },
    findProjectDisclosure() {
      //全部查询
      request.post("/project-disclosure/page").then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalSize;
        }
      });
    },
    add() {
      //新增
      this.$router.push({
        name: "ProjectDisclosureAU",
        params: {
          type: "add",
        },
      });
    },
    formatterTypeOfDisclosure(row, column, index) {
      //交底类型
      let cellValue = row.typeOfDisclosure;
      if (cellValue == 1) {
        return "技术交底";
      } else if (cellValue == 2) {
        return "安全交底";
      } else if (cellValue == 3) {
        return "质量交底";
      } else if (cellValue == 4) {
        return "合同交底";
      } else if (cellValue == 5) {
        return "其他";
      }
    },
    formatterState(row, column, index) {
      //流程状态
      let cellValue = row.state;
      if (cellValue == "0") {
        return "未提交";
      } else if (cellValue == 1) {
        return "审批中";
      } else if (cellValue == 2) {
        return "已通过";
      } else if (cellValue == 3) {
        return "已驳回";
      } else if (cellValue == 4) {
        return "已撤回";
      }
    },
    handleSizeChange(pageSize) {
      //每页显示条数
      this.queryList.pageSize = pageSize;
      //this.queryProjectApproval();
    },
    handleCurrentChange(pageNum) {
      //当前页
      this.queryList.pageNum = pageNum;
      //this.queryProjectApproval();
    },
    handleSelectionChange(val) {
      // 批量选择行数
      this.selectedList = val;
    },
    cellStyle() {
      //表格行居中
      return "text-align:center";
    },
    rowClass() {
      //表格列居中
      return "text-align:center";
    },
  },
};
</script>

<style>
</style>